<template>
    <div class="realtime">
        <div class="management-module">
            <span @click="modulenum=0" class="module1" :class="{active : modulenum==0?true:false}">
                <h2 class="my-big-font">实时概况</h2>
                <span v-show="modulenum==0">更新时间 {{format(overviewtTme)}}</span>
              <!-- 实时概况 -->
            </span>
            <span @click="modulenum=1" class="module2" :class="{active : modulenum==1?true:false}">
                <h2 class="my-big-font">订单记录</h2>
                <span v-show="modulenum==1">(仅展示近1小时充值记录)</span>
              <!-- 订单记录 -->
            </span>
        </div>
        <!-- 实时概况 -->
        <div class="realtime-overview" v-show="modulenum==0">
            <!-- 实时概况头 -->
            <!-- <div class="overview-top">
                <h2 class="my-big-font">实时概况</h2>
                <span style="padding-left:10px">更新时间 {{format(overviewtTme)}}</span>
            </div> -->
            <!-- 实时概况内容 -->
            <div class="overview-content">
                <ul>
<!--                    <li v-for="p,i of overviewData" :key="i">
                        <div class="libox">
                            <p>{{p.name}}</p>
                            <h3>{{p.size}}</h3>
                            <div  v-if="i==3||i==7" class="button"><span>充值</span></div>
                            <div class="box-bottom" v-else>较昨日
                                <img v-if="p.Percent<=0" src="../assets/img/index/upward-1.png" alt="">
                                <img v-else src="../assets/img/index/back.png" alt="">
                                {{p.percentage>=0?p.percentage:-p.percentage}}
                            </div>
                        </div>
                    </li>-->
                  <li>
                    <div class="libox">
                      <p>今日话费充值成交金额（元）</p>
                      <h3>{{phoneSum.size}}</h3>
<!--                      <div  v-if="i==3||i==7" class="button"><span>充值</span></div>-->
                      <div class="box-bottom" >较昨日
                        <img v-if="phoneSum.percent>=0" src="../assets/img/index/upward-1.png" alt="">
                        <img v-else src="../assets/img/index/downward-1.png" alt="">
                        {{phoneSum.percent>=0?phoneSum.percent:-phoneSum.percent}}
                      </div>
                    </div>
                  </li>
                  <li>
                    <div class="libox">
                      <p>今日话费充值交易笔数（笔）</p>
                      <h3>{{phoneCount.size}}</h3>
                      <!--                      <div  v-if="i==3||i==7" class="button"><span>充值</span></div>-->
                      <div class="box-bottom" >较昨日
                        <img v-if="phoneCount.percent>=0" src="../assets/img/index/upward-1.png" alt="">
                        <img v-else src="../assets/img/index/downward-1.png" alt="">
                        {{phoneCount.percent>=0?phoneCount.percent:-phoneCount.percent}}
                      </div>
                    </div>
                  </li>
                  <li>
                    <div class="libox">
                      <p>今日话费充值收益（元）</p>
                      <h3>{{phonePrice.size}}</h3>
                      <!--                      <div  v-if="i==3||i==7" class="button"><span>充值</span></div>-->
                      <div class="box-bottom" >较昨日
                        <img v-if="phonePrice.percent>=0" src="../assets/img/index/upward-1.png" alt="">
                        <img v-else src="../assets/img/index/downward-1.png" alt="">
                        {{phonePrice.percent>=0?phonePrice.percent:-phonePrice.percent}}
                      </div>
                    </div>
                  </li>
                  <li>
                    <div class="libox">
                      <p>158平台话费充值余额（元）</p>
                      <h3>{{phonePriceBalance.price}}</h3>
                      <div class="button"><span><a href="http://202.85.213.156:8080/agent/ShowAgentManageServlet">充值</a></span></div>
<!--                      <div class="box-bottom" >较昨日
                        <img v-if="phonePriceBalance.percent<=0" src="../assets/img/index/upward-1.png" alt="">
                        <img v-else src="../assets/img/index/back.png" alt="">
                        &lt;!&ndash;                        {{p.percentage>=0?p.percentage:-p.percentage}}&ndash;&gt;
                      </div>-->
                    </div>
                  </li>
                  <li>
                    <div class="libox">
                      <p>今日用户权益成交金额（元）</p>
                      <h3>{{vipSum.size}}</h3>
                      <!--                      <div  v-if="i==3||i==7" class="button"><span>充值</span></div>-->
                      <div class="box-bottom" >较昨日
                        <img v-if="vipSum.percent>=0" src="../assets/img/index/upward-1.png" alt="">
                        <img v-else src="../assets/img/index/downward-1.png" alt="">
                        {{vipSum.percent>=0?vipSum.percent:-vipSum.percent}}
                      </div>
                    </div>
                  </li>
                  <li>
                    <div class="libox">
                      <p>今日用户权益交易笔数（笔）</p>
                      <h3>{{vipCount.size}}</h3>
                      <!--                      <div  v-if="i==3||i==7" class="button"><span>充值</span></div>-->
                      <div class="box-bottom" >较昨日
                        <img v-if="vipCount.percent>=0" src="../assets/img/index/upward-1.png" alt="">
                        <img v-else src="../assets/img/index/downward-1.png" alt="">
                        {{vipCount.percent>=0?vipCount.percent:-vipCount.percent}}
                      </div>
                    </div>
                  </li>
                  <li>
                    <div class="libox">
                      <p>今日用户权益收益（元）</p>
                      <h3>{{vipPrice.size}}</h3>
                      <!--                      <div  v-if="i==3||i==7" class="button"><span>充值</span></div>-->
                      <div class="box-bottom" >较昨日
                        <img v-if="vipPrice.percent>=0" src="../assets/img/index/upward-1.png" alt="">
                        <img v-else src="../assets/img/index/downward-1.png" alt="">
                        {{vipPrice.percent>=0?vipPrice.percent:-vipPrice.percent}}
                      </div>
                    </div>
                  </li>
                  <li>
                    <div class="libox">
                      <p>易通联峰用户权益余额（元）</p>
                      <h3>{{vipPriceBalance.balance}}</h3>
                      <div class="button"><span><a href="http://120.26.77.23:8086/login/loginIndex">充值</a></span></div>
<!--                      <div class="box-bottom" >较昨日
                        <img v-if="VipPriceBalance.percent<=0" src="../assets/img/index/upward-1.png" alt="">
                        <img v-else src="../assets/img/index/back.png" alt="">
                        &lt;!&ndash;                        {{p.percentage>=0?p.percentage:-p.percentage}}&ndash;&gt;
                      </div>-->
                    </div>
                  </li>
                </ul>
            </div>
        </div>
        <!-- 消息中心 -->
        <div class="realtime-news" v-show="modulenum==0">
            <!-- 消息中心头 -->
            <div class="news-top">
                <h2 class="my-big-font">消息中心</h2>
                <span @click="gonews">更多></span>
            </div>
            <!-- 消息中心内容 -->
            <div class="news-content">
               <div>{{newsData.msgInfo}}</div>
               <span>{{format(newsData.createTime*1000)}}</span>
            </div>
        </div>
        <!-- 订单记录 -->
        <div class="realtime-orders" v-show="modulenum==1">
            <!-- 订单记录头 -->
            <!-- <div class="orders-top">
                <h2 class="my-big-font">订单记录（仅展示近1小时充值记录）</h2>
            </div> -->
            <!-- 订单记录内容 -->
            <div class="orders-content">
                <el-table :data="tableData" stripe style="width: 100%" fit>
                    <el-table-column  prop="bh"  label="订单号"></el-table-column>
                    <el-table-column  prop="userid"  label="用户账号" min-width="80"></el-table-column>
                    <el-table-column  prop="goodsId"  label="产品编号"></el-table-column>
                    <el-table-column  prop="proName"  label="产品名称"></el-table-column>
                    <el-table-column  prop="categoryName"  label="产品类型"></el-table-column>
                    <el-table-column  prop="goodsparvalue"  label="安卓展示价格" max-width="90"></el-table-column>
                    <el-table-column  prop="apGoodsparvalue"  label="苹果展示价格" max-width="90"></el-table-column>
                    <el-table-column  prop="price"  label="订单金额"  max-width="90"></el-table-column>
                    <el-table-column  prop="price"  label="实际支付金额"  max-width="110"></el-table-column>
                    <el-table-column  prop="payTime"  label="支付时间" min-width="130"></el-table-column>
                </el-table>
            </div>
        </div>
        <el-pagination v-show="modulenum==1" @current-change="handleCurrentChange"  background layout="prev, pager, next" :page-count=pageCount></el-pagination>
    </div>
</template>
<script>
export default {
    data(){
        return{
            modulenum:0,
            overviewtTme:Date.parse(new Date()),//实时概况更新时间
            //实况数据
            phoneSum: {
              name:'',
              size:'',
              percent:''
            },
            phoneCount: {
              name:'',
              size:'',
              percent:''
            },
            phonePrice: {
              name:'',
              size:'',
              percent:''
            },
            phonePriceBalance: {
              name:'',
              price:''
            },
            vipSum: {
              name:'',
              size:'',
              percent:''
            },
            vipCount: {
              name:'',
              size:'',
             percent:''
            },
            vipPrice: {
              name:'',
              size:'',
              percent:''
            },
            vipPriceBalance: {
              name:'',
              balance:''
            },
            //消息数据
            newsData: {
              msgInfo:'',
              createTime:''
            },
            //消息未读条数
            unRead:'',
            //订单数据
            tableData: [
                {
                    bh: '',
                    userid: '',
                    goodsId: '',
                    proName:'',
                    categoryName:'',
                    goodsparvalue:'',
                    apGoodsparvalue:'',
                    price:'',
                    payTime:''
                }
            ],
            pageNum:6,//每页6条
            pageCount:null,//一共几页
            currentPage:'',//当前页码
            client: {},
            topic:"",
        }
    },
    mounted(){
      this.currentPage=1
      this.profit();
      this.orderlist();
      this.newsMsg();
     this.getWs();
    },

    methods:{
        getWs(){
            this.axios.get('/recharge/sys/Register/register').then(res=>{
               this.topic=res.data.data.uuid;
               this.client= Stomp.client('wss://'+res.data.data.path+'/ws');
                this.connect();
            });
        },


        onConnected: function(frame) {
            // 订阅频道
            const topic =this.topic;
            this.client.subscribe(topic, this.responseCallback, this.onFailed)
        },
        onFailed: function(frame) {
            console.log('MQ Failed:' + frame)
        },
        responseCallback: function(frame) {
            // 接收消息处理
            console.log('MQ msg=>', frame.body)

            this.newsData=JSON.parse(frame.body);
        },
        connect() {
            // 初始化mqtt客户端，并连接mqtt服务
            const headers = {
                login: "guest",
                password: "guest"
            }
            this.client.connect("guest","guest", this.onConnected, this.onFailed,"kefu")
            // this.client.connect("guest","guest", this.onConnected, this.onFailed,"/")
            // this.client.connect(MQTT_USERNAME,MQTT_PASSWORD, this.onConnected, this.onFailed)//   有的是不需要MQTT_host的，不需要的话，就不用传这个参数
        },




        gonews(){
            this.$router.push('/index/news')
        },
        //页码改变触发函数
        handleCurrentChange(page) {
          this.currentPage=page
          this.orderlist()
        },
        //处理时间戳
        format(shijianchuo) {
          if(shijianchuo){
            var time = new Date(parseInt(shijianchuo));
            var y = time.getFullYear();
            var m = time.getMonth() + 1;
            var d = time.getDate();
            var h = time.getHours();
            var f = time.getMinutes();
            var s = time.getSeconds();
            //想要什么格式可以自己改
            // return y + '-' + this.add0(m) + '-' + this.add0(d) +" "+ this.add0(h)+':'+this.add0(f)+':'+this.add0(s);
            return y + '-' + m + '-' + d +" "+ this.add0(h)+':'+this.add0(f)+':'+this.add0(s);
          }
        },
        //小于10的时候，前边加0（08：08：12）
        add0(m) {
            return m < 10 ? '0' + m : m
        },
        profit(){
          this.axios.get('/recharge/sys/Profit/getindex').then(res=>{
            //console.log(res.data)
            this.phoneSum=res.data.phoneSum;
            this.phoneCount=res.data.phoneCount;
            this.phonePrice=res.data.phonePrice;
            this.phonePriceBalance=res.data.phonePriceBalance;
            this.vipSum=res.data.vipSum;
            this.vipCount=res.data.vipCount;
            this.vipPrice=res.data.vipPrice;
            this.vipPriceBalance=res.data.vipPriceBalance;
          })
        },
        orderlist(){
            this.axios.post('/recharge/sys/order/allorderList?limit='+this.pageNum+'&page='+this.currentPage).then(res=>{
              //console.log(1111,res.data)
              for(var i=0;i<res.data.data.length;i++){
                res.data.data[i].payTime=this.format(res.data.data[i].payTime*1000)
              }
              this.tableData=res.data.data;
              this.pageCount = Math.ceil(res.data.count/this.pageNum);
            })
          },
        newsMsg(){
          var userid = sessionStorage.getItem("uid");
          this.axios.post('/recharge/sys/warnmsg/showOne?userid='+userid).then(res=>{
            this.newsData=res.data.data.data.warnMsg
            this.unRead=res.data.data.data.count;
          })
        },
    },
    watch:{
      tableData(){
        var mm=this.tableData.length
        if(mm<this.pageNum){
          for(var n=0;n<this.pageNum-mm;n++){
            this.tableData.push({'bh':'  '})
          }
        }
      }
    }
}
</script>

<style scoped>
.realtime{
    padding-right: 82px;
    padding-bottom: 80px;
    background: #fff;
    margin: 10px 0 0 10px;
    position: relative;
    min-height:calc(100vh - 96px);
}
/* 选项卡 */
/* 选项卡 */
.management-module{
    padding-left: 30px;
    display: flex;
    align-items: center;
}
.management-module>span{
    display: inline-block;
    height: 105px;
    min-width: 200px;
    padding: 30px 0;
    margin-right: 60px;
    /* border-bottom: 3px solid #fff; */
    transition: .3s;
}
.management-module .module2{
  display: flex;
}
.management-module .module2 span{
  display: flex;
  align-items: center;
  padding:2px 10px;
}
.management-module .module1 span{
  padding-top: 10px;
}
.management-module>span h2{
  color: #bdbdbd;
  padding: 0;
}
.management-module .active h2{
  color:rgb(255, 120, 42) ;
    /* border-bottom: 3px solid rgb(255, 120, 42); */
}
.management-module .active span{
  color: #666666;
  font-size: 15px;
  display: inline-block;
  /* padding-top: 10px; */
}
/* 实时概况开始 */
/* 实时概况头 */
.overview-top{
    padding-left: 30px;
    display: flex;
    align-items: baseline;
}
.overview-top span{
    font-size: 16px;
    color: #666666;
}
/* .overview-top h2{
    font-size: 22px;
    color: #333333;
    padding-top: 30px;
    padding-bottom: 15px;
} */
/* 实时概况内容 */
.overview-content ul{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding-left: 15px;
}
.overview-content ul li{
    width: 25%;
    padding: 15px;
    padding: .6vw;
}
.overview-content ul li>.libox{
    color: #fff;
    background: url('../assets/img/index/bg-1.png');
    background-size: 100% 100%;
    padding:10px 12px;
}
.overview-content ul li>.libox p{
  height: 44px;
  font-size: 15px;
}
.overview-content ul h3{
    font-size: 24px;
    margin-top: 8px;
}
.overview-content ul .box-bottom{
    font-size: 14px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 12px;
}
.overview-content ul .box-bottom img{
    width: 12px;
    margin-left: 12px;
    margin-right: 5px;
}
.overview-content ul .button{
    text-align: right;
}
.overview-content ul .button span{
    width: 80px;
    height: 34px;
    display: inline-block;
    text-align: center;
    line-height: 34px;
    background: #fff;
    color: rgba(12, 203, 185, 1);
    font-size: 16px;
    /* padding: 6px 22px;    */
    border-radius: 50px;
}
.overview-content ul li:nth-child(8) .button span{
    color: rgba(103, 170, 253, 1);
}
.overview-content ul li:nth-child(2)>div{
    background: url('../assets/img/index/bg-2.png');
    background-size: 100% 100%;
}
.overview-content ul li:nth-child(3)>div{
    background: url('../assets/img/index/bg-3.png');
    background-size: 100% 100%;
}
.overview-content ul li:nth-child(4)>div{
    background: url('../assets/img/index/bg-4.png');
    background-size: 100% 100%;
}
.overview-content ul li:nth-child(5)>div{
    background: url('../assets/img/index/bg-5.png');
    background-size: 100% 100%;
}
.overview-content ul li:nth-child(6)>div{
    background: url('../assets/img/index/bg-6.png');
    background-size: 100% 100%;
}
.overview-content ul li:nth-child(7)>div{
    background: url('../assets/img/index/bg-7.png');
    background-size: 100% 100%;
}
.overview-content ul li:nth-child(8)>div{
    background: url('../assets/img/index/bg-8.png');
    background-size: 100% 100%;
}
/* 实时概况结束 */

</style>
<style scoped>
/* 消息中心 */
.realtime-news{
    padding-left: 30px;
    padding-right: 15px;
}
.news-top{
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #666666;
}
/* .news-top h2{
    font-size: 22px;
    color: #333333;
    padding-top: 25px;
    padding-bottom: 19px;
} */
.news-content{
    padding: 15px;
    background: #F6F6F6;
    border-radius: 6px;
    color: rgba(113, 112, 158, 1);
    display: flex;
    justify-content: space-between;
}
.news-content>div{
    width: calc(100% - 250px);
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
</style>
<style scoped>
/* 订单记录 */
.realtime-orders{
    padding-left:30px;
    padding-right: 15px;
    padding-top: 10px;
}
.orders-content{
    /* min-height: 460px; */
    position: relative;
}
.el-table{
    border-bottom: 0;
    border: 1px solid #EBEEF5;
}
</style>
<style>
/* 表格边框 */
.el-table th{
    background-color: #F6F6F6!important;
}
.el-table--border::after, .el-table--group::after, .el-table::before {
    background-color: #fff!important;
}
/* 分页 */
.el-pagination{
    position: absolute;
    bottom: 18px;
    left: 50%;
    transform: translate(-50%);
}
</style>
<style>
.el-table__row .cell{
  min-height: 20px!important;
}
</style>